<template>
    <div class="section-wrap">
        <!-- 头部 -->
         <div class="headerBox">
        <div class="header">
            <x-icon type="ios-arrow-left" size="" class="icon-white" @click="goBack"></x-icon>审批
        </div>
        </div>
        <div class="form-section" style="margin-top: 40px;">
            <div class="form-item form-item-style1">
                <div class="label-title">
                <label>检查编号</label>
                </div>
                <div class="input_div">
                <input type="text" value="HR123456789">
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                <label>被检查单位</label>
                </div>
                <div class="input_div">
                <input type="text" value="XX项目">
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                <label>检查类型</label>
                </div>
                <div class="input_div">
                <input type="text" value="日常检查">
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                <label>检查时间</label>
                </div>
                <div class="input_div">
                <input type="text" value="2018-05-24">
                </div>
            </div>
            <div class="info_div3">
                <p>检查组成员及分工<span>（2组）</span></p>
            </div>
            <div class="member_div">
                <ul class="member_list">
                    <li v-for="(item,index) in info.divisionList" :key="index">
                        <div class="member-item">
                            <label>成员1</label>
                            <span>{{item.divisionProsonName}}</span>
                        </div>
                        <div class="member-item">
                            <label>分工（考核项）</label>
                            <span>{{item.standardNameList}}</span>
                        </div>
                    </li>
                </ul>
            </div>
    
            <div class="info_div3" >
                <p>计划审批</p>
            </div>
            <div class="form-item form-item-style1" style="border-top: 1px solid #ebeef2">
                <div class="label-title">
                    <label>审批结果</label>
                </div>
                <div class="input_div">
                        <el-radio v-model="info.approvalResult" label="1"  :class="iin?'active':''" @click="getCheck()" >通过</el-radio>
                        <el-radio v-model="info.approvalResult" label="2" :class="iino?'active':''" @click="getCheckno()">不通过</el-radio>
                </div>
            </div>
            <div class="form-item form-item-style1" style="border-bottom: none">
                <div class="label-title">
                    <label>审批意见</label>
                </div>
            </div>
            <div class="area_div">
                <textarea placeholder="请输入意见（自行换行）" v-model="info.ApprovalRemark "></textarea>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label class="space1">审批人</label>
                </div>
                <div class="input_div">
                  <input type="text" v-model="info.approver" :disabled="isDisabled">
                </div>
            </div>
    
           <div class="btns_div">
                <a class="submitBtn" @click="savedata">提 交</a>
            </div>
        </div>
    </div>
</template>
<script>
import formatDate from "../../utils/formatDate";
  import { XHeader,Tabbar, TabbarItem, Group, Cell ,TransferDom, Popup} from 'vux'
  import LoadMore from "vux/src/components/load-more/index";
export default {
  data() {
    return {
      isDisabled: true, // 是否禁止输入
        iin:false,
        iino:true,
      params: {
        id: [],
        planId: "",
        startDate: "",
        endDate: "",
        checkDepartId: "",
        rocordNotPlan: 0,
        status: 1,
        skipCount: 0,
        maxResultCount: 1,
      },
       info: {
        createUser: -1,
        createDate: "",
        operUser: -1,
        operDate: "",
        checkDepartId: '',
        checkDepartName: '',
        charge: '',
        classifyOneId: '',
        classifyOneName: '',
        classifyTwoId: '',
        classifyTwoName: '',
        checkDate: '',
        checkGroupLeaderId: '',
        checkGroupLeaderName: '',
        receiverId: '',
        receivrtName: '',
        checkNo: '',
        status: 0,
        approvalResult: '',
        approvalRemark: '',
        approver: '',
        approverId: '',
        approvalDate: null,
        rocordId: '',
        rocordNotPlan: 0,
        rocordStatus: 0,
        checkScore: 0,
        deleteTag: 0,
        deleteUser: '',
        deleteDate: null,
        beDepartId: '',
        beDepartName: '',
        divisionList: [
            {divisionProsonName:'李丽丽',standardNameList:'线路工程量化考核'},
            {divisionProsonName:'周一天',standardNameList:'变电站工程量化考核'}
        ],
        allowApproval: false,
        id: null
      }
    };
  },
  components: {},
  created() {
      this.info.approvalDate=this.getdatanew();
      this. getInfo();
 
  },
  methods: {
    getInfo() {
       this.params.planId=this.$route.query.id; //id
       this.$axiosAjax.getPalnInfo(this.params)
        .then(res => {
          if (res.data.success == true) {
             this.info = res.data.result;
             this.info.divisionList=res.data.result.divisionList;
          }
        })
        .catch(err => {});
    },
    goBack() {
      this.$router.go(-1);
    },
    getCheck()
    {this.iin=true;
     this.iino=false;
     },
    getCheckno()
    {
     this.iin=false;
     this.iino=true;
    },
    getdatanew(){
        var date=new Date();
        var seperator1='-';
        var year=date.getFullYear();
        var month=date.getMonth()+1;
        var strDate=date.getDate();
        if(month>= 1 && month<=9)
        {
            month ="0" +month;
        }
        if(strDate>= 0 && strDate<=9)
        {
            strDate ="0" +strDate;
        }
        var currentdate=year+seperator1+month+seperator1+strDate;
    },
    //approversubmit
    savedata() {
        this.$axiosAjax
                .approversubmit(this.info)
                .then(res => {
                    if (res.data.success == true) {
                        alert("提交成功");
                    }
                })
                .catch(err => { });
    }
  }
};
</script>
<style lang="less">
.input_div{
    .el-radio__input.is-checked {
        .el-radio__inner{
            background: #469b7a !important;
            border-color: #469b7a !important;
        }
    }
    .el-radio__input.is-checked+.el-radio__label{
        color: #469b7a !important;
    }
}
</style>
<style lang="less" scoped>
.form-section{
    margin-bottom:0;
}
.area_div {
  border-bottom: 1px solid #ebeef2;
  margin-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  textarea {
    border: none;
    resize: none;
    width: 100%;
    font-size: 14px;
    outline: none;
    height: 50px;
  }
}
.space1 {
  letter-spacing: 7px;
}
.form-item {
  .input_div {
    > span.radio_span {
      font-size: 14px;
      color: #666;
      background-image: url("/static/images/radio_not.png");
      background-position: left center;
      background-repeat: no-repeat;
      background-size: 17px 17px;
      padding: 2px 0 2px 20px;
      margin-left: 30px;
    }
    .radio_span.active {
      background-image: url("/static/images/radio_yes.png");
    }
    > span:first-child {
      margin-left: 0;
    }
    .vux-x-icon {
      fill: #999;
      float: right;
      margin-top: 17px;
    }
  }
}
.info_div3 {
  height: 55px;
  line-height: 45px;
  padding: 0 20px;
  border-top: 10px solid #ebeef2;
  p {
    float: left;
    color: #469b7a;
    font-size: 16px;
    font-weight: bold;
    span{
        color: #999;
        font-weight: bold;
    }
  }
}
.member_div {
  .member_list {
    padding-left: 20px;
    li {
      border-top: 1px solid #ebeef2;
      height: 84px;
      line-height: 30px;
      padding-top: 11px;
      .member-item {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 20px;
        > label {
          font-weight: bold;
        }
        >span{
            color: #666;
        }
      }
    }
    .member1 {
      color: #ff0000;
    }
    .member2 {
      color: #15bd84;
    }
  }
}
.btns_div {
  background: #ebeef2;
  padding: 30px 20px 55px;
  justify-content: center;
  display: flex;
  a {
    height: 40px;
    border-radius: 20px;
    display: inline-block;
    width: 70%;
    text-align: center;
    line-height: 40px;
    color: #fff;
  }
  .submitBtn {
    background: #469b7a;
  }
  .cancelBtn {
    background: #ffb400;
  }
}
.addPlan_select {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  z-index: 10;
  .planSel_list {
    width: 60%;
    margin: 0 auto;
    padding-top: 150px;
    li {
      border-radius: 10px;
      height: 57px;
      line-height: 57px;
      text-align: center;
      background: #fff;
      margin-bottom: 6px;
      color: #469b7a;
      font-size: 16px;
    }
  }
}
</style>

